<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>任务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">            
            <el-form-item>
            <el-tag type="info" style="height: 36px;line-height: 36px;">执行器</el-tag>
              <el-select style="min-width: 100px;" v-model="filters.jobGroup" placeholder="请选择">
                <el-option label="执行器1" value=1></el-option> 
                <el-option label="执行器2" value=2></el-option>         
              </el-select>
            </el-form-item>
            <el-tag type="info" style="height: 36px;line-height: 36px;">任务描述</el-tag>
            <el-form-item>
              <el-input v-model="filters.jobDesc"  style="min-width: 100px;" @keyup.enter.native="handleSearch" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-tag type="info"style="height: 36px;line-height: 36px;">Jobhandler</el-tag>
            <el-form-item>
              <el-input v-model="filters.executorHandler" style="min-width: 100px;" @keyup.enter.native="handleSearch" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-button  type="danger" 
              @click="showAddDialog">新增任务</el-button>
          </el-form>
        </el-col>

      <!--列表-->
      <el-table :data="datalist" highlight-current-row v-loading="loading" stripe style="width: 100%;">
        <el-table-column prop="id" label="任务ID" min-width="5%">
        </el-table-column>
        <el-table-column prop="jobDesc" label="任务描述" min-width="10%" sortable>
        </el-table-column>
        <el-table-column prop="glueType" label="运行模式" min-width="15%"  :formatter="formatGlueType" sortable>
        </el-table-column>
        <el-table-column prop="jobCron" label="Cron" min-width="8%" sortable>
        </el-table-column>
        <el-table-column prop="author" label="负责人" min-width="5%" sortable>
        </el-table-column>
          <el-table-column prop="jobStatus" label="状态" min-width="5%"
                :filters="[{ text: 'PAUSED', value: 'PAUSED' }, { text: 'NORMAL', value: 'NORMAL' }]"
                :filter-method="filterTag"      filter-placement="bottom-end">
          <template slot-scope="scope">
              <el-tag :type="scope.row.jobStatus === 'NORMAL' ? 'primary' : 'success'" 
              disable-transitions>{{scope.row.jobStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="opt" label="操作" min-width="15%" >
          <template slot-scope="scope">
           <el-row style="margin:5px">
            <el-button type="primary"
            @click="operate(scope.$index,scope.row)" size="mini" round>执行</el-button>
            <el-button type="primary" style="margin-left: 0px"
            @click="pause(scope.$index,scope.row)" size="mini" round 
            v-show="scope.row.jobStatus === 'NORMAL' ? true : false">暂停</el-button>
            <el-button type="primary" style="margin-left: 0px"
            @click="resume(scope.$index,scope.row)" size="mini" round 
            v-show="scope.row.jobStatus === 'PAUSED' ? true : false">恢复</el-button>

            <el-button type="info"  style="margin-left: 0px"
            @click="toLog(scope.$index,scope.row)" size="mini" round>日志</el-button>

          </el-row>
          <el-row style="margin:5px">
            <el-button type="primary" 
            @click="showEditDialog(scope.$index,scope.row)" size="mini" round>编辑</el-button>
            <el-button type="warning" style="margin-left: 0px"
            @click="glueCode(scope.$index,scope.row)" size="mini" round 
             v-show="scope.row.glueType === 'BEAN' ? false : true"> glue </el-button>
            <el-button type="danger" style="margin-left: 0px"
            @click="delItem(scope.$index,scope.row)" size="mini" round>删除</el-button>
          </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="length"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordsTotal">
        </el-pagination>
      </el-col>

      <!--新增界面-->
      <el-dialog title="新增任务" :visible.sync ="addFormVisible" :close-on-click-modal="false" width="60%">
        <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
        <el-row>
          <el-col :span="12">
          <el-form-item label="执行器" prop="jobGroup">
              <el-select style="width: 80%;" v-model="addForm.jobGroup">
                <el-option label="执行器1" value=1></el-option> 
                <el-option label="执行器2" value=2></el-option>         
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务描述" prop="jobDesc" >
            <el-input v-model="addForm.jobDesc" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="路由策略" prop="executorRouteStrategy">
              <el-select style="width: 80%;" v-model="addForm.executorRouteStrategy">
                <el-option label="第一个" value="FIRST"></el-option> 
                <el-option label="最后一个" value="LAST"></el-option>
                <el-option label="轮询" value="ROUND"></el-option>
                <el-option label="随机" value="RANDOM"></el-option>
                <el-option label="一致性hash" value="CONSISTENT_HASH"></el-option>
                <el-option label="最不经常使用" value="LEAST_FREQUENTLY_USED"></el-option>
                <el-option label="最近最久未使用" value="LEAST_RECENTLY_USED"></el-option>
                <el-option label="故障转移" value="FAILOVER"></el-option>
                <el-option label="忙碌转移" value="BUSYOVER"></el-option>
                <el-option label="分片广播" value="SHARDING_BROADCAST"></el-option>         
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="Cron" prop="jobCron">
            <el-autocomplete
                class="inline-input"
                style="width: 80%;"
                v-model="addForm.jobCron"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="运行模式" prop="glueType">
              <el-select style="width: 80%;" v-model="addForm.glueType" @change="handleGlueType">
                <el-option label="BEAN模式" value="BEAN"></el-option> 
                <el-option label="GLUE-JAVA模式" value="GLUE_GROOVY"></el-option>
                <el-option label="GLUE-SHELL模式" value="GLUE_SHELL"></el-option> 
                <el-option label="GLUE-PYTHON模式" value="GLUE_PYTHON"></el-option> 
                <el-option label="GLUE-NODEJS模式" value="GLUE_NODEJS"></el-option>          
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="Jobhandler" prop="executorHandler" >
            <el-input v-model="addForm.executorHandler" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容" :disabled="disableglueType"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="任务参数" prop="executorParam" >
            <el-input v-model="addForm.executorParam" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="子任务ID" prop="childJobId" >
            <el-input v-model="addForm.childJobId" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
              <el-select style="width: 80%;" v-model="addForm.executorBlockStrategy">
                <el-option label="单机串行" value="SERIAL_EXECUTION"></el-option> 
                <el-option label="丢弃后续调度" value="DISCARD_LATER"></el-option> 
                <el-option label="覆盖之前调度" value="COVER_EARLY"></el-option>        
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="失败处理策略" prop="executorFailStrategy">
              <el-select style="width: 80%;" v-model="addForm.executorFailStrategy">
                <el-option label="失败告警" value="FAIL_ALARM"></el-option> 
                <el-option label="失败重试" value="FAIL_RETRY"></el-option>         
              </el-select>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="负责人" prop="author" >
            <el-input v-model="addForm.author" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="报警邮件" prop="alarmEmail" >
            <el-input v-model="addForm.alarmEmail" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>


      <!--编辑界面-->
      <el-dialog title="编辑任务" :visible.sync ="editFormVisible" :close-on-click-modal="false" width="60%">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
        <el-row>
          <el-col :span="12">
          <el-form-item label="执行器" prop="jobGroup" >
              <el-select style="width: 80%;" v-model="editForm.jobGroup" disabled>
                <el-option label="执行器1" value=1></el-option> 
                <el-option label="执行器2" value=2></el-option>         
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="任务描述" prop="jobDesc" >
            <el-input v-model="editForm.jobDesc" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="路由策略" prop="executorRouteStrategy">
              <el-select style="width: 80%;" v-model="editForm.executorRouteStrategy">
                <el-option label="第一个" value="FIRST"></el-option> 
                <el-option label="最后一个" value="LAST"></el-option>
                <el-option label="轮询" value="ROUND"></el-option>
                <el-option label="随机" value="RANDOM"></el-option>
                <el-option label="一致性hash" value="CONSISTENT_HASH"></el-option>
                <el-option label="最不经常使用" value="LEAST_FREQUENTLY_USED"></el-option>
                <el-option label="最近最久未使用" value="LEAST_RECENTLY_USED"></el-option>
                <el-option label="故障转移" value="FAILOVER"></el-option>
                <el-option label="忙碌转移" value="BUSYOVER"></el-option>
                <el-option label="分片广播" value="SHARDING_BROADCAST"></el-option>         
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="Cron" prop="jobCron">
            <el-autocomplete
                class="inline-input"
                style="width: 80%;"
                v-model="editForm.jobCron"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="运行模式" prop="glueType" >
              <el-select style="width: 80%;" v-model="editForm.glueType" disabled>
                <el-option label="BEAN模式" value="BEAN"></el-option> 
                <el-option label="GLUE-JAVA模式" value="GLUE_GROOVY"></el-option>
                <el-option label="GLUE-SHELL模式" value="GLUE_SHELL"></el-option> 
                <el-option label="GLUE-PYTHON模式" value="GLUE_PYTHON"></el-option> 
                <el-option label="GLUE-NODEJS模式" value="GLUE_NODEJS"></el-option>          
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="Jobhandler" prop="executorHandler" >
            <el-input v-model="editForm.executorHandler" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容" :disabled="disableEditglueType"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="任务参数" prop="executorParam" >
            <el-input v-model="editForm.executorParam" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="子任务ID" prop="childJobId" >
            <el-input v-model="editForm.childJobId" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
              <el-select style="width: 80%;" v-model="editForm.executorBlockStrategy">
                <el-option label="单机串行" value="SERIAL_EXECUTION"></el-option> 
                <el-option label="丢弃后续调度" value="DISCARD_LATER"></el-option> 
                <el-option label="覆盖之前调度" value="COVER_EARLY"></el-option>        
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="失败处理策略" prop="executorFailStrategy">
              <el-select style="width: 80%;" v-model="editForm.executorFailStrategy">
                <el-option label="失败告警" value="FAIL_ALARM"></el-option> 
                <el-option label="失败重试" value="FAIL_RETRY"></el-option>         
              </el-select>
          </el-form-item>
           </el-col>
          </el-row>
                  <el-row>
          <el-col :span="12">
          <el-form-item label="负责人" prop="author" >
            <el-input v-model="editForm.author" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="报警邮件" prop="alarmEmail" >
            <el-input v-model="editForm.alarmEmail" auto-complete="off" 
            style="width: 80%;" placeholder="请输入内容"></el-input>
          </el-form-item>
           </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
      </el-dialog>

    </el-col>

  </el-row>
</template>

<script>
import API from '../../api/api_task'
import qs from 'qs'
export default {
  data() {
    return {
      filters: {
        jobGroup:'',
        jobDesc: '',
        executorHandler:''
      },
      loading: false,
      datalist: [],
      start: 0,
      length: 10,
      currentPage4: 4,
      recordsTotal: 0,
              //新增相关数据
      jobCronTips: [{ "value": "1 */5 * * * ? *"}],
      addFormVisible: false,//新增界面是否显示
      addLoading: false,
      addFormRules: {
        jobGroup: [
          {required: true, message: '请输入执行器', trigger: 'blur'}
        ],
        jobDesc: [
          {required: true, message: '请输入任务描述', trigger: 'blur'}
        ],
        executorRouteStrategy: [
          {required: true, message: '请输入路由策略', trigger: 'blur'}
        ],
                jobCron: [
          {required: true, message: '请输入正则表达式', trigger: 'blur'}
        ],
                glueType: [
          {required: true, message: '请输入运行模式', trigger: 'blur'}
        ],
                executorHandler: [
          {message: '请输入JobHandler', trigger: 'blur'}
        ],
                executorParam: [
          {message: '请输入任务参数', trigger: 'blur'}
        ],
                childJobId: [
          {message: '请输入子任务id', trigger: 'blur'}
        ],
                executorBlockStrategy: [
          {required: true, message: '请输入阻塞处理策略', trigger: 'blur'}
        ],
                executorFailStrategy: [
          {required: true, message: '请输入失败处理策略', trigger: 'blur'}
        ],
                author: [
          {required: true, message: '请输入负责人', trigger: 'blur'}
        ],
                alarmEmail: [
          {message: '请输入告警邮件', trigger: 'blur'}
        ],
      },
      addForm: {
        jobGroup: '',
        jobDesc: '',
        executorRouteStrategy: '',
        jobCron: '',
        glueType:'',
        executorHandler: '',
        executorParam: '',
        childJobId: '',
        executorBlockStrategy: '',
        executorFailStrategy: '',
        author: '',
        alarmEmail: ''
      },
      disableglueType:false,

      //编辑相关数据
      disableEditglueType:false,
      editFormVisible: false,//新增界面是否显示
      editLoading: false,
      editFormRules: {
        jobGroup: [
          {required: true, message: '请输入执行器', trigger: 'blur'}
        ],
        jobDesc: [
          {required: true, message: '请输入任务描述', trigger: 'blur'}
        ],
        executorRouteStrategy: [
          {required: true, message: '请输入路由策略', trigger: 'blur'}
        ],
                jobCron: [
          {required: true, message: '请输入正则表达式', trigger: 'blur'}
        ],
                glueType: [
          {required: true, message: '请输入运行模式', trigger: 'blur'}
        ],
                executorHandler: [
          {message: '请输入JobHandler', trigger: 'blur'}
        ],
                executorParam: [
          {message: '请输入任务参数', trigger: 'blur'}
        ],
                childJobId: [
          {message: '请输入子任务id', trigger: 'blur'}
        ],
                executorBlockStrategy: [
          {required: true, message: '请输入阻塞处理策略', trigger: 'blur'}
        ],
                executorFailStrategy: [
          {required: true, message: '请输入失败处理策略', trigger: 'blur'}
        ],
                author: [
          {required: true, message: '请输入负责人', trigger: 'blur'}
        ],
                alarmEmail: [
          {message: '请输入告警邮件', trigger: 'blur'}
        ],
      },
      editForm: {
        jobGroup: '',
        jobDesc: '',
        executorRouteStrategy: '',
        jobCron: '',
        glueType:'',
        executorHandler: '',
        executorParam: '',
        childJobId: '',
        executorBlockStrategy: '',
        executorFailStrategy: '',
        author: '',
        alarmEmail: ''
      },

    }
  },
  methods: {
    handleSearch(){
      this.recordsTotal = 0;
      this.start = 0;
      this.search();
    },
    search(){
      let that = this;
      let params = {
        start: that.start,
        length: that.length,
        jobGroup: that.filters.jobGroup,
        jobDesc: that.filters.jobDesc,
        executorHandler: that.filters.executorHandler,

      };
      console.log(params)
      that.loading = true;
      API.findList(qs.stringify(params)).then(function (result) {
        that.loading = false;
        console.log(result)
        if (result && result.data) {
          that.recordsTotal = result.recordsTotal;
          that.datalist = result.data;
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      });
    },
    formatGlueType: function (row, column) {
      if(row.glueType==="BEAN"){
        return "BEAN模式："+row.executorHandler;
      }else if(row.glueType==="GLUE_GROOVY"){
        return "GLUE-JAVA模式";
      }else if(row.glueType==="GLUE_SHELL"){
        return "GLUE-SHELL模式"
      }else if(row.glueType==="GLUE_PYTHON"){
        return "GLUE_PYTHON模式"
      }else if(row.glueType==="GLUE_NODEJS"){
        return "GLUE_NODEJS模式"
      }
      },
    formatJobStatus: function (row, column) {
        if(row.jobStatus=='PAUSED')
        return ;
      },
    filterTag(value, row) {
        return row.jobStatus === value;
      },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.length=val,
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.start=(val-1)*this.length,
      this.search();
    },
    handleSelect(item) {
        console.log(item);
      },

    //新增
    showAddDialog: function () {
      this.addFormVisible = true;
      this.addForm = {
        jobGroup: '',
        jobDesc: '',
        executorRouteStrategy: '',
        jobCron: '',
        glueType:'',
        executorHandler: '',
        executorParam: '',
        childJobId: '',
        executorBlockStrategy: '',
        executorFailStrategy: '',
        author: '',
        alarmEmail: ''
      };
    },
    handleGlueType(){
        if(this.addForm.glueType=="BEAN"){
          this.disableglueType=false;
        }else {
         this.disableglueType=true;
        }
      },

    querySearch(queryString, cb) {
        var jobCronTips = this.jobCronTips;
        var results = queryString ? jobCronTips.filter(this.createFilter(queryString)) : jobCronTips;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (jobCronTips) => {
          return (jobCronTips.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    addSubmit: function () {
      let that = this;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          that.loading = true;
          let para = Object.assign({}, this.addForm);
          console.log(qs.stringify(para))
          API.add(qs.stringify(para)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '新增成功', duration: 2000});
              that.$refs['addForm'].resetFields();
              that.addFormVisible = false;
              that.search();
            } else {
              that.$message.error({showClose: true, message: '修改失败', duration: 2000});
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });

        }
      });
    },
    //编辑
    showEditDialog: function (index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        this.handleEditGlueType();
    },
    handleEditGlueType(){
        if(this.editForm.glueType=="BEAN"){
          this.disableEditglueType=false;
        }else {
         this.disableEditglueType=true;
        }
      },
    editSubmit: function () {
        let that = this;
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            that.loading = true;
          let para = {
            jobDesc: this.editForm.jobDesc,
            executorRouteStrategy: this.editForm.executorRouteStrategy,
            jobCron: this.editForm.jobCron,
            executorHandler: this.editForm.executorHandler,
            executorParam: this.editForm.executorParam,
            childJobId: this.editForm.childJobId,
            glueType:this.editForm.glueType,
            executorBlockStrategy: this.editForm.executorBlockStrategy,
            executorFailStrategy: this.editForm.executorFailStrategy,
            author: this.editForm.author,
            alarmEmail: this.editForm.alarmEmail,
            id: this.editForm.id
          };
          console.log(para)
            // let param = Object.assign({}, this.editForm);            
            // console.log(param)
            API.update(qs.stringify(para)).then(function (result) {
              that.loading = false;
              if (result &&result.code== 200) {
                that.$message.success({showClose: true, message: '修改成功', duration: 2000});
                that.$refs['editForm'].resetFields();
                that.editFormVisible = false;
                that.search();
              } else {
                that.$message.error({showClose: true, message: '修改失败', duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });

          }
        });
      },
           //执行
      operate: function (index, row) {
        let that = this;
        this.$confirm('确认执行吗?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          console.log(row.id)
          let params = {id: row.id};
          API.operate(qs.stringify(params)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '执行成功', duration: 1500});
              that.search();
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        }).catch(() => {
        });
      },
                 //暂停恢复
      pause: function (index, row) {
        let that = this;
        this.$confirm('确认暂停吗?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          console.log(row.id)
          let params = {id: row.id};
          API.pause(qs.stringify(params)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '执行成功', duration: 1500});
              that.search();
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        }).catch(() => {
        });
      },
                       //暂停恢复
      resume: function (index, row) {
        let that = this;
        this.$confirm('确认恢复吗?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          console.log(row.id)
          let params = {id: row.id};
          API.resume(qs.stringify(params)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '执行成功', duration: 1500});
              that.search();
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        }).catch(() => {
        });
      },
            //删除
      delItem: function (index, row) {
        let that = this;
        this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          console.log(row.id)
          let params = {id: row.id};
          API.remove(qs.stringify(params)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '删除成功', duration: 1500});
              that.search();
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        }).catch(() => {
        });
      },

      toLog: function (index, row) {
        let that = this;
        console.log("toLog"+row.jobGroup+""+row.id)
        let ob={
          jobGroup:row.jobGroup,
          jobId:row.id,
        }
        that.$store.dispatch("changeJOBID",ob)
        that.$router.push({path: '/joblog'});

      },
      glueCode: function (index, row) {
        let that = this;
        that.$store.dispatch("changeGlueJobId",row.id)
        that.$router.push({path: '/jobcode'});

      }

  },
  mounted() {
    this.handleSearch()
   }
}
</script>

<style scoped>
  .el-select{
    width:100px;
  }
</style>
